<!-- 调理方案页面 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title></title>
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
  <link href="../res/css/weui.css" rel="stylesheet" type="text/css" />
  <link href="../res/css/weuix.css" rel="stylesheet" type="text/css" />
  <link href="../res/css/mp_common.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="../res/css/common.css" />
  <script src="../res/js/zepto.min.js" type="text/javascript"></script>
  <script src="../res/js/zepto.weui.js" type="text/javascript"></script>
  <script src="../res/js/php.js" type="text/javascript"></script>
  <script src="../res/js/picker.city.js" type="text/javascript"></script>
  <script src="../res/js/mp_common.js?v=1" type="text/javascript"></script>
  <script src="../res/js/common.js"></script>
  <script src="../res/js/echarts.min.js" type="text/javascript"></script>
</head>
<style>
  .navbar {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: black;
    line-height: 50px;
  }

  .navbar_item {
    font-size: 15px;
    font-family: PingFang SC;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #353535;
  }

  .navbar>div {
    width: 20%;
    float: left;
    text-align: center;
  }

  .active {
    height: 48px;
    border-bottom: 2px solid #1189ff;
    font-weight: bold;
    color: #1189ff;
  }

  .wrappar {
    width: 95%;
    margin-left: 2.5%;
    border-radius: 8px;
    background-color: white;
  }

  .physical_message {
    width: 100%;
  }


  .message_item_on {
    color: #1189ff !important;
  }

  .hide {
    display: none !important;
  }

  .weui-flex__item {
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #353535;
  }

  .remind {
    height: 24px;
    background: rgba(17, 137, 255, 0.04);
    border-radius: 10px;
    font-size: 14px;
    line-height: 24px;
    padding: 0 2%;
    font-family: PingFang SC;
    font-weight: 500;
    margin: 5px 1%;
    color: #1189ff;
    flex-wrap: nowrap;
    float: left;
    flex-shrink: 0;
  }

  .remind_message {
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #353535;
    margin: 5px 3%;
    letter-spacing: 2px;
    float: left;
  }

  .organized_plan {
    border-radius: 10px;
    overflow: hidden;
  }

  .Conditioning_products {
    width: 95%;
    margin: 10px 2.5%;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    border-radius: 10px;
  }

  .prodution_item {
    width: 50%;
    background-color: red;
  }

  .production_images {
    width: 80%;
    margin: 20px 10%;
  }
</style>

<body ontouchstart>
  <div class="fixed-top">
    <div class="weui-header weui-btn_primary">
      <div class="weui-header-left">
        <a id="btnBack" class="icon icon-109"></a>
      </div>
      <div class="weui-header-title">调理方案</div>
      <div class="weui-header-right"></div>
    </div>
    <div class="navbar">
      <!-- 选项卡 -->
      <div class="navbar_item active" id="physical_performance">体质表现</div>
      <div class="navbar_item" id="organized_plan">调理方案</div>
      <!-- <div class="navbar_item" id="Conditioning_products">调理产品</div> -->
    </div>

    <!-- 体质表现模板 -->
    <div class="physical_performance" id="module" style="
          width: 95%;
          background-color: white;
          margin-left: 2.5%;
          border-radius: 10px;
          margin-top: 10px;
        ">
      <div class="pie_chart" style="width: 100%; height: 350px">
        <!-- 圆饼图模板 -->
        <div id="main" style="width: 100%; height: 250px"></div>
        <div style="
              width: 80%;
              height: 50px;
              margin-left: 10%;
              text-align: center;
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #353535;
            ">
          您的体质为辨析结果为:
          <p id="main_physique" style="
                font-size: 19px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #1189ff;
              "></p>
        </div>
        <div style="
              display: flex;
              justify-content: center;
              margin-top: 10px;
              font-size: 13px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #757575;
            ">
          间杂体质:阴虚质,痰湿质
        </div>
      </div>
      <div class="physical_message">
        <!-- 体质表现详细信息 -->
        <div class="message_wrappar" style="padding-bottom: 20px"></div>
      </div>
    </div>

    <!-- 调理方案模板 -->
    <div class="organized_plan hide" id="module">
      <div class="top_warry" style="
            width: 100%;
            text-align: center;
            background-color: rgba(255, 248, 248, 1);
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #fa6464;
            line-height: 30px;
          "></div>
      <ul class="collapse" style="
            width: 95%;
            background-color: white;
            margin-left: 2.5%;
            border-radius: 10px;
            margin-top: 10px;
          "></ul>
    </div>
  </div>
</body>

<script>
  var corporeityProbs = [],
    acquireReport = []; //体质结果和报告变量
  (echarts_legend_data = []), (echarts_data = []); //定义echarts属性
  (physique_data_div = ""), (Condition_div = ""); //页面渲染变量
  corporeityResultParmas = {} //体质报告参数
  var dataList = {};

  //点击返回上一页
  $("#btnBack").click(function () {
    if (getQst("hrefUrl") == "test_report") {
      goPageNo(-1);
    } else {
      goPage("inquiry_doctor_index.htm");
    }
  });

  // 体质结果获取
  //判断是从那个页面跳转过来的
  if (getQst("hrefUrl") == "test_report") {
    corporeityResultParmas = {
      requestId: localStorage.getItem("requestId"), //requestId
    };
  } else {
    corporeityResultParmas = {
      "answers": localStorage.getItem("answers"), //问卷填写内容
      "mainCorporeity": localStorage.getItem("mainCorporeity"), //体质结果
      "requestId": localStorage.getItem("requestId") //requestId
    }
  }

  newAjaxPost(
    "/h5/smart/corporeityResult",
    corporeityResultParmas,
    getCorporeityResultOk
  );

  function getCorporeityResultOk(json) {
    console.log(json);
    if (json.code == 0) {
      console.log(json);
      msgInfo(`${json.msg}`);
      setTimeout(() => {
        goPage("user_question_invest.htm");
      }, 2000);
    } else {
      corporeityProbs = json.data.corporeityProbs;
      console.log(corporeityProbs);
    }
  }

  // 体质报告获取
  const acquireReportParmas = {
    requestId: localStorage.getItem("requestId"), //requestId
  };
  newAjaxPost(
    "/h5/smart/acquireReport",
    acquireReportParmas,
    getAcquireReportOk
  );

  function getAcquireReportOk(json) {
    console.log(json);
    if (json.code == 0) {
      console.log(json);
      msgInfo(`${json.msg}`);
      setTimeout(() => {
        goPage("user_question_invest.htm");
      }, 2000);
    } else {
      console.log(json);
      dataList = json.data;
    }
  }

  //获取数据渲染页面函数
  function pageRender() {
    //体质表现
    corporeityProbs.forEach((ele) => {
      echarts_legend_data.push(ele.cor);
      echarts_data.push({
        value: ele.prob,
        name: ele.cor,
      });
    });
    console.log(echarts_legend_data);

    $(`#${dataList.constitution}`).addClass("message_item_on");

    $("#main_physique").text(dataList.constitution);

    dataList.moduleList[0].descList.forEach((item) => {
      physique_data_div += `<div style="font-family: PingFang SC;line-height: 30px;margin-left: 5%;font-size: 14px;font-family: PingFang SC;font-weight: bold;color: #353535;">
                        [${item.descName}]</div>
                    <div
                        style="width: 90%; font-size: 14px;font-family: PingFang SC;line-height: 30px;margin: 0 5%;font-family: PingFang SC;font-weight: 500;color: #353535;">
                    ${item.descText}
        </div>`;
    });

    $(".message_wrappar").html(physique_data_div);

    //调理方案
    $(".top_warry").text(`当前调理方案仅针对:${dataList.constitution}`);
    for (var i = 1; i < dataList.moduleList.length - 1; i++) {
      var imgList = [
        "icon_emotion",
        "icon_diet",
        "icon_daily_life",
        "icon_motion",
      ];
      Condition_div += `
            <li>
                <div class="weui-flex js-category" style="padding: 10px 5%;" >
                        <img src="../res/images/${
                          imgList[i - 1]
                        }.png" alt="" style="width: 20px;margin-right:10px;">
                        <div class="weui-flex__item">
                            <p style="display: block;">${
                              dataList.moduleList[i].moduleName
                            }</p>
                        </div>
                        <i class="icon icon-74"></i>
                    </div>
                    <div class="page-category js-categoryInner" id=${
                      dataList.moduleList[i].moduleName
                    }>
                        <div class="weui-cells page-category-content">
                            <div class="weui-cell__bd" style="padding: 10px 3%;margin: 0;display: flex;">
                                <div class="remind">推荐</div>
                                <p class="remind_message">${
                                  dataList.moduleList[i].moduleDesc
                                }</p>
                            </div>
                        </div>
                    </div>
            </li>`;
    }
    Condition_div += `
            <li>
                <div class="weui-flex js-category" style="padding: 10px 5%;" >
                        <img src="../res/images/icon_acupoint.png" alt="" style="width: 20px;margin-right:10px;">
                        <div class="weui-flex__item">
                            <p style="display: block;">穴位保健</p>
                        </div>
                        <i class="icon icon-74"></i>
                    </div>
                    <div class="page-category js-categoryInner" id="穴位保健">
                    </div>
            </li>`;

    $(".collapse").html(Condition_div);

    //饮食调养具体信息渲染
    var classNameList = []; //食疗名称列表
    $(`#${dataList.moduleList[2].moduleName}`)
      .find(".weui-cells")
      .append(
        `<div class="remind descHint"  style="width:90%;padding: 10px 3%;margin:0px 2%;text-align:center;">${dataList.moduleList[2].descHint}</div>`
      );
    dataList.moduleList[2].dietPlan.planList.forEach((item) => {
      $(`#${dataList.moduleList[2].moduleName}`)
        .find(".weui-cells")
        .append(
          `<div class="remind ${item.className}"  style="width:90%;text-align:center;padding: 10px 3%;margin:0px 2%;">${item.className}</div>`
        );
      //食疗类别详细信息渲染
      item.foodList.forEach((ele) => {
        $(`.${item.className}`).after(
          `<div class="remind ${ele.foodName}" style="margin-left:5%;margin-right:75%;background: #1189FF;color: #FFFFFF;height: 23px;">${ele.foodName}</div>`
        );
        ele.detailsList.forEach((element) => {
          $(`.${ele.foodName}`)
            .after(`<div class="weui-cell__bd" style="padding: 10px 3%;margin: 0;display: flex;">
                        <div class="remind">${element.name}</div>
                        <p class="remind_message">${element.desc}</p>
                </div>`);
        });
      });
    });

    //食物补充信息渲染
    dataList.moduleList[2].descList.forEach((item) => {
      $(`#${dataList.moduleList[2].moduleName}`)
        .find(".descHint")
        .after(
          `<div class="weui-cell__bd" style="padding: 10px 3%;margin: 0;display: flex;">
                        <div class="remind">${item.descName}</div>
                        <p class="remind_message">${item.descText}</p>
                </div>`
        );
    });

    //穴位保健具体信息渲染
    console.log(dataList.moduleList[dataList.moduleList.length - 1]);
    var pointmessage = "";
    dataList.moduleList[dataList.moduleList.length - 1].descList.forEach(
      (item) => {
        pointmessage += `<div class="weui-cells page-category-content">
                            <div class="weui-cell__bd" style="padding: 0px 3%;margin: 0;display: flex;">
                                <div class="remind">${item.descName}</div>
                                <p class="remind_message">${item.descText}</p>
                            </div></div>`;
      }
    );
    pointmessage += `<div class="weui-cells page-category-content">
                            <div class="weui-cell__bd" style="padding: 10px 3%;margin: 0;display: flex;flex-wrap:wrap">
                                <div class="remind">${
                                  dataList.moduleList[
                                    dataList.moduleList.length - 1
                                  ].imgUrls[0].imgDesc
                                }</div>
                                <img class="remind_message" src=${
                                  dataList.moduleList[
                                    dataList.moduleList.length - 1
                                  ].imgUrls[0].imgPath
                                }>
                        </div></div>`;
    $("#穴位保健").html(pointmessage);
  }

  pageRender();

  //选项卡
  $(".navbar_item").on("click", function () {
    $(this).addClass("active").siblings(".active").removeClass("active");
    var click_item = $(this).attr("id");
    $(`.${click_item}`)
      .removeClass("hide")
      .siblings("#module")
      .addClass("hide");
  });

  //调理方案点击
  $(".collapse .js-category").click(function () {
    $parent = $(this).parent("li");
    if ($parent.hasClass("js-show")) {
      $parent.removeClass("js-show");
      $(this).children("i").removeClass("icon-35").addClass("icon-74");
    } else {
      $parent.siblings().removeClass("js-show");
      $parent.addClass("js-show");
      $(this).children("i").removeClass("icon-74").addClass("icon-35");
      $parent.siblings().find("i").removeClass("icon-35").addClass("icon-74");
    }
  });

  //echart函数
  function chart() {
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      legend: {
        icon: "circle",
        bottom: "5%",
        left: "center",
        width: "auto",
        selectedMode: false,
        textStyle: {
          color: "#757575",
          fontWeight: 500,
        },
        data: echarts_legend_data,
      },
      series: [{
        type: "pie",
        radius: "55%",
        center: ["50%", "40%"],
        selectedMode: "single",
        data: echarts_data,
        itemStyle: {
          normal: {
            label: {
              show: true,
              formatter: "{b}({d}%)",
            },
            labelLine: {
              show: true,
            },
          },
        },
      }, ],
    };

    option && myChart.setOption(option);
  }
  chart();
</script>

</html>